<template>
  <div class="flex">
    <div class="relative flex-1">
      <div class="flex flex-col items-center text-[#6f6f6f] ml-3" :style="{ gap: menuGap + 'px' }">
        <template v-for="(menu, indexMenu) in menuItem" :key="indexMenu">
          <WorkflowMenuItem
            :style="{
              height: getHeight(menu) + 'px'
            }"
            :icon="menu.icon"
            :title="menu.title"
            :status="menu.status"
            :message="menu.message"
            :noticeNum="menu.noticeNum"
            :input-array="menu.inputArray"
            :is-chief="menu.isChief"
            :click="menu.click"
          >
            <template v-for="(input, indexInput) in menu.inputArray" :key="indexInput">
              <div :style="{ height: (input.height ?? menuHeight) + menuGap + 'px' }">
                <img
                  v-if="!!input.operation"
                  :src="operationIconMap[input.operation]"
                  :class="[
                    'w-[18px]',
                    'h-[18px]',
                    'select-none',
                    'cursor-pointer',
                    input.copyState ? 'opacity-30' : ''
                  ]"
                  :alt="input.operation.toLowerCase()"
                  :title="input.operation.toLowerCase()"
                  @click="handleOperation(input, indexInput, menu, indexMenu)"
                />
              </div>
            </template>
          </WorkflowMenuItem>
        </template>
      </div>
      <div class="absolute left-0 right-0 bottom-0 p-4">
        <slot />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type {
  WorkflowInputProperties,
  WorkflowMenuItemProperties
} from '@main/pages/workflow/types/menu-item';
import { sum } from '@shared/utils/array';
import Copy from '@main/assets/images/workflow/copy.webp';
import Refresh from '@main/assets/images/workflow/refresh.webp';
import DouYin from '@shared/assets/images/douyin.png';
import TaoBao from '@main/assets/images/workflow/taobao.webp';
import WorkflowMenuItem from './MenuItem.vue';

const props = defineProps({
  menuGap: {
    type: Number,
    default: 20
  },
  menuHeight: {
    type: Number,
    default: 32
  },
  menuItem: {
    type: Array as () => WorkflowMenuItemProperties[],
    required: true
  }
});

const emit = defineEmits<{
  (
    e: 'operation-callback',
    input: WorkflowInputProperties,
    indexIndex: number,
    menu: WorkflowMenuItemProperties,
    menuIndex: number
  ): void;
}>();

const getHS = (item: WorkflowMenuItemProperties) =>
  Array.from(item.inputArray, (x) => x.height ?? props.menuHeight);

const getGS = (item: WorkflowMenuItemProperties) =>
  new Array<number>(item.inputArray.length - 1).fill(props.menuGap);

const getHeight = (item: WorkflowMenuItemProperties) => sum([...getHS(item), ...getGS(item)]);

const operationIconMap = {
  Copy,
  Refresh,
  DouYin,
  TaoBao
};

const handleOperation = (
  input: WorkflowInputProperties,
  indexIndex: number,
  menu: WorkflowMenuItemProperties,
  menuIndex: number
) => {
  emit('operation-callback', input, indexIndex, menu, menuIndex);
};
</script>

<style lang="less" scoped></style>
